<template>
  <!-- 头部 -->
  <div class="powerHead">
    <span class="tabHead_Title">出动</span>
    <div class="flex justify-around" style="width: 80%">
      <div class="iconBox">
        <img src="@/assets/image/icon_group.png" alt="" />
        <span>{{ headObj.cddzZs || 0 }}队</span>
      </div>
      <div class="iconBox">
        <img src="@/assets/image/icon_person.png" alt="" />
        <span>{{ headObj.cdry || 0 }}人</span>
      </div>
      <div class="iconBox">
        <img src="@/assets/image/icon_car.png" alt="" />
        <span>{{ headObj.cdclZs || 0 }}车</span>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="powerForm">
    <div
      v-if="powerFormList.length == 0"
      style="width: 100%; font-size: 30px; line-height: 200px; text-align: center; color: #ccccccb0"
    >
      暂无数据
    </div>
    <div v-for="item in powerFormList" v-else :key="item.id" class="formItem">
      <div class="flex items-center">
        <img :src="item.tbdz || DZIconMap" alt="" />
        <span>{{ item.jgjc }}</span>
      </div>
      <span>{{ `${item.cdcl} 车 ${item.cdry} 人` }}</span>
    </div>
  </div>
  <div class="powerMain">
    <!-- echart -->
    <div class="mainTop">
      <div v-for="item in echartsList" :key="item.id" style="display: flex">
        <div
          style="
            width: 230px;
            height: 200px;
            flex-shrink: 0;
            background: rgba(1, 10, 15, 0.5);
            margin-right: 10px;
          "
        >
          <GaugeEchart
            :dom-i-d="item.id"
            :title="item.title"
            :value="item.value"
            style="flex-shrink: 0"
          ></GaugeEchart>
        </div>
        <div class="echartsMessage">
          <h2>单车最大流量</h2>
          <div style="text-align: center">
            <b style="font-size: 50px; font-family: Century Gothic; font-weight: bold">{{
              echartsInfo.dczdLl
            }}</b>
            L/S
          </div>
        </div>
        <div class="echartsMessage">
          <h2>最大举升高度</h2>
          <div style="text-align: center">
            <b style="font-size: 50px; font-family: Century Gothic; font-weight: bold">{{
              echartsInfo.zdjsGd
            }}</b>
            m
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div id="lineEchartsBox"></div>
    <!--  -->
    <div class="mainBottom">
      <div class="flex justify-between">
        <div class="flex h-[20px] mt-[10px]">
          <img src="@/assets/image/titleBg.png" />
          <h1 class="text-white text-[20px] font-bold ml-[10px]">联动力量</h1>
        </div>
        <div class="numBox">
          <span>{{ linkPowerList.length }}</span
          >支
        </div>
      </div>
      <div class="flex flex-wrap">
        <div
          v-if="linkPowerList.length == 0"
          style="
            width: 100%;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            color: #ccccccb0;
          "
        >
          暂无数据
        </div>
        <div
          v-for="(item, index) in linkPowerList"
          v-else
          :key="index"
          class="linkPowerBox"
          :class="{ activeLink: item.flag == 1 }"
        >
          <span>{{ item.dwlbmc }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryJqCdllInfo, queryLdllList } from '@/service'
import { useBusinessStore } from '@/store'
import GaugeEchart from '@/components/common/GaugeEchart.vue'
import DZIconMap from '@/assets/image/dzBg_map.png'
import * as echarts from 'echarts'

const store = useBusinessStore()
// 顶部数据
const headObj: any = ref({})
// 出动力量list
const powerFormList: any = ref([])
// 仪表盘右侧数据块
const echartsInfo: any = ref({})
const echartsList = reactive([
  {
    id: 0,
    title: '载水总量（t）',
    value: 0,
  },
  {
    id: 1,
    title: 'A 类泡沫 (L)',
    value: 0,
  },
  {
    id: 2,
    title: 'B 类泡沫 (L)',
    value: 0,
  },
])
// 联动力量list
const linkPowerList: any = ref([])
const clmcArr: any = ref([])
const cdslArr: any = ref([])
const getList = (id: string) => {
  queryJqCdllInfo({ jqId: id }).then((res: any) => {
    headObj.value.cddzZs = res.cddzZs || 0
    headObj.value.cdry = res.cdry || 0
    headObj.value.cdclZs = res.cdclZs || 0
    // 出动队站集合
    powerFormList.value = res.cddzList
    //  单车最大流量和最大举升高度info
    echartsInfo.value.dczdLl = res.dczdLl || 0
    echartsInfo.value.zdjsGd = res.zdjsGd || 0
    echartsList[0].value = res.zsZl || 0
    echartsList[1].value = res.alpmZl || 0
    echartsList[2].value = res.blpmZl || 0
    // 获取柱状图数据
    clmcArr.value = res.cdclList.map((val: any) => {
      return val.clmc || ''
    })
    cdslArr.value = res.cdclList.map((val: any) => {
      return val.cdsl || ''
    })
    initEcharts()
  })

  // 联动力量
  queryLdllList({ jqId: id }).then((res: any) => {
    linkPowerList.value = res
  })
}
// 监听警情ID
const jqId = computed(() => {
  return store.jqInfo.id
})
watch(
  jqId,
  (newVal, oldVal) => {
    getList(newVal)
  },
  { immediate: true }
)

// 柱状图
const initEcharts = () => {
  const myChart = echarts.init(document.getElementById('lineEchartsBox'))
  const salvProName = clmcArr.value || []
  const salvProValue = cdslArr.value || []
  const salvProMax = [] //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(Math.max.apply(Math, salvProValue))
  }
  const option = {
    backgroundColor: '#010a0f77',
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '2%',
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params: any) {
        return params[0].name + ' : ' + params[0].value
      },
    },
    xAxis: {
      show: false,
      type: 'value',
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '18',
            fontWeight: 'bold',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: 'category',
        inverse: false,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#ffffff',
            fontSize: '20',
            fontWeight: 'bold',
          },
          formatter: function (value: any) {
            return value + '辆'
          },
        },
        data: salvProValue,
      },
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: 'rgba(0, 255, 204, 1)',
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            //   {
            //     offset: 0,
            //     color: "rgb(57,89,255,1)",
            //   },
            //   {
            //     offset: 1,
            //     color: "rgb(46,200,207,1)",
            //   },
            // ]),
          },
        },
        barWidth: 12,
        data: salvProValue,
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 12,
        barGap: '-100%',
        data: salvProMax,
        itemStyle: {
          normal: {
            color: 'rgba(24,31,68,1)',
            barBorderRadius: 30,
          },
        },
      },
    ],
  }
  myChart.setOption(option)
}
</script>
<style lang="less" scoped>
.powerHead {
  display: flex;
  align-items: center;
  padding: 5px;
  padding-top: 10px;

  .tabHead_Title {
    width: 15%;
    color: #fff;
    font-size: 24px;
    font-weight: bolder;
  }

  .iconBox {
    display: flex;
    align-items: center;

    img {
      width: 41px;
      height: 41px;
      margin-right: 6px;
    }

    span {
      color: #fff;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

.powerForm {
  height: 260px;
  background: rgba(1, 10, 15, 0.5);
  overflow-y: auto;
  padding: 10px 10px;
  box-sizing: border-box;

  .formItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;

    span {
      color: #fff;
      font-size: 21px;
      font-weight: bolder;
    }

    img {
      border: none;
      width: 40px;
      height: 40px;
      margin-right: 18px;
      object-fit: cover;
    }
  }
}

.powerMain {
  height: 92%;
  margin-top: 10px;
  overflow: hidden;

  .mainTop {
    width: 400px;
    height: 210px;
    display: flex;
    animation: 20s flip linear infinite;

    @keyframes flip {
      100% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-430%);
      }
    }

    &:hover {
      // 鼠标移入暂停
      // animation-play-state: paused;
    }

    .echartsMessage {
      width: 230px !important;
      height: 200px;
      margin-right: 10px;
      flex-shrink: 0;
      background: rgba(1, 10, 15, 0.5);
      color: #fff;
      font-size: 20px;
      padding: 30px 0 0 30px;

      h2 {
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin: 10px 0;
      }
    }
  }

  #lineEchartsBox {
    height: 320px;
  }

  .mainBottom {
    color: #fff;
    height: 162px;
    font-size: 24px;
    background: rgba(1, 10, 15, 0.5);
    margin-top: 10px;
    padding: 10px;

    .numBox {
      span {
        font-size: 36px;
        font-weight: bolder;
      }
    }

    .linkPowerBox {
      flex-shrink: 0;
      width: 90px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border: 1px solid #00ffcc;
      background: rgba(0, 0, 0, 0.6);
      margin: 10px;
    }

    .activeLink {
      background: rgba(0, 255, 255, 0.6);
    }
  }
}
</style>
